<template>
  <div class="gameItem-container entry-bottom">
    <div class="left">
      <a :href="props.gameItem.link" target="_blank">
        <img :src="props.gameItem.img" :alt="props.gameItem.cname" />
        <span v-if="props.gameItem.type.length">{{ props.gameItem.type }}</span>
      </a>
    </div>
    <div class="center">
      <div class="cname">
        <a :href="props.gameItem.link" target="_blank">{{
          props.gameItem.cname
        }}</a>
      </div>
      <div class="ename">{{ props.gameItem.ename }}</div>
      <div class="time">{{ props.gameItem.time }}</div>
      <div class="introduce">
        <a></a>
        {{ props.gameItem.introduce }}
      </div>
    </div>
    <div class="right">
      <div class="score">
        {{ props.gameItem.bScore }}<sub>{{ props.gameItem.sScore }}</sub>
      </div>
      <div class="content">媒体平均分：--</div>
    </div>
  </div>
</template>

<script setup>
import { myScroll } from "@/utils/scrollReveal";
import { onMounted } from "vue";
const props = defineProps({
  gameItem: Object,
});
onMounted(() => {
  myScroll(".entry-bottom", "bottom");
});
</script>

<style scoped lang="less">
.gameItem-container {
  margin-bottom: 40px;
  width: 960px;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
  }
  .left {
    position: relative;
    width: 145px;
    height: 100%;
    float: left;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      width: 37px;
      height: 36px;
      line-height: 26px;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      background: url(https://0day.ali213.net/images/title_cn.png) no-repeat;
      display: block;
    }
  }
  .center {
    width: 605px;
    height: 200px;
    float: left;
    background: none;
    border-right: 2px dashed #f3f3f3;
    .cname {
      height: 35px;
      overflow: hidden;
      margin-top: 16px;
      cursor: pointer;
      font-size: 24px;
      &:hover a {
        color: #009900;
      }
    }
    .ename {
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      color: #c6c6c6;
      font-size: 12px;
    }
    .time {
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      margin: 10px 0;
      color: #737373;
    }
    .introduce {
      width: 560px;
      height: 60px;
      line-height: 1.6;
      overflow: hidden;
      margin-top: 18px;
      color: #969696;
      font-size: 16px;
      word-wrap: break-word;
      position: relative;
      padding-left: 30px;
      a {
        color: #dedede;
        display: block;
        width: 25px;
        height: 20px;
        float: left;
        background: url(https://0day.ali213.net/images/yinhao.png) no-repeat;
        position: absolute;
        left: 0;
      }
    }
  }
  .right {
    width: 182px;
    height: 200px;
    float: right;
    .score {
      position: relative;
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 100px;
      color: #20a3ff;
      margin: 30px 30px;
      text-align: left;
      font-weight: 600;
      background: none;
      sub {
        position: absolute;
        bottom: 40px;
        right: 40px;
        font-size: 60px;
      }
    }
    .content {
      margin: auto;
      margin-top: 50px\9;
      text-align: center;
      margin-top: 30px;
      color: #20a3ff;
      font-size: 16px;
      &::before {
        display: block;
        content: "";
        margin: 0 auto 8px;
        width: 138px;
        height: 1px;
        background: #ddd;
        background: linear-gradient(
          90deg,
          #fff 20%,
          rgb(227, 227, 227) 50%,
          #fff 100%
        );
      }
    }
  }
}
</style>
